<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>伍艺平&余雪丽诚挚邀请</title>
    <link rel="stylesheet" href="../static/css/zepto.fullpage.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <style type="text/css">
        #loading-mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #e2ecf5;
            z-index: 99;
        }

        .loading-box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -150px;
            display: block;
            width: 300px;
            height: 300px;
            border-radius: 3px;
            font-size: 30px;
            color: rgba(64, 158, 255, .5);
            vertical-align: top;
            text-align: center;
        }

        .loading-box p {
            font-size: 16px;
            margin: 16px 0;
        }

        .loading:before,
        .loading:after,
        .loading {
            display: inline-block;
            width: 1em;
            height: 1em;
            color: inherit;
            vertical-align: middle;
            pointer-events: none;
            border-radius: 50%;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: loading 1.8s infinite ease-in-out;
            animation: loading 1.8s infinite ease-in-out;
        }

        .loading {
            color: currentcolor;
            position: relative;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
            top: -1em;
        }

        .loading:before {
            right: 100%;
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .loading:after {
            left: 100%;
        }

        .loading:before,
        .loading:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            width: inherit;
            height: inherit;
        }

        @-webkit-keyframes loading {
            0%, 80%, 100% {
                box-shadow: 0 1em 0 -1em;
            }
            40% {
                box-shadow: 0 1em 0 -.2em;
            }
        }

        @keyframes loading {
            0%, 80%, 100% {
                box-shadow: 0 1em 0 -1em;
            }
            40% {
                box-shadow: 0 1em 0 -.2em;
            }
        }

        .load-img {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript">
        var loadSum = 0
        var isMobile = null

        function loadDone() {
            loadSum++
        }

        function pcTip() {
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                console.log('mobile')
                isMobile = true
            } else {
                console.log('pc')
                loadSum = loadSum - 10
                isMobile = false
                document.getElementById('loading-txt').innerHTML = '请使用手机或其它移动设备打开!'
            }
        }
    </script>
</head>
<body>
<div id="loading-mask">
    <div class="loading-box">
        <div class="loading"></div>
        <p id="loading-txt">加载中</p>
    </div>
</div>
<!--音乐播放-->
<!--<div id="play-btn"><i class="iconfont" style="font-size: 20px;">&#xe617;</i></div>-->
<img class="load-img" onload="loadDone();pcTip()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/1.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/2.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/3.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/4.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/6.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/7.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/8.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/9.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/10.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/11.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/12.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/13.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/14.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/15.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/16.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/17.jpg">
<img class="load-img" onload="loadDone()" src="https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/18.jpg">
<div class="wp">
    <div class="wp-inner">
        <div class="page page1">
            <div class="photo-wrap">
                <div
                        class="full-bg js-animate animated animation-8000"
                        style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/1.jpg);width: 100%;height: 100%;position: absolute;top:0;left: 0;"
                        data-sec="zoomCycle" data-time="0">
                </div>
                <div
                        class="full-bg js-animate animated animation-2000"
                        style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/2.jpg);width: 100%;height: 100%;position: absolute;top:0;left: 0;"
                        data-sec="myzoomIn" data-time="12500">
                </div>
                <!--半透明框框-->
                <div class="text-frame js-animate animated"
                     data-animate="rotateIn" data-time="500">

                </div>
                <div class="text-frame js-animate animated"
                     data-animate="rotateIn" data-time="1200"
                     data-sec="pulseing"
                     data-sectime="1200">
                </div>
            </div>
            <div class="ele-wrap">
                <h1 class="js-animate animated animation-500"
                    data-animate="bounceInDown"
                    data-time="500"
                    data-sec="zoomOut"
                    data-sectime="700"
                    style="position: absolute;top: 40%;width: 100%;text-align: center;">准备</h1>
                <h2 class="js-animate animated animation-500"
                    data-animate="bounceInRight"
                    data-time="1500"
                    data-sec="bounceOutUp"
                    data-sectime="500"
                    style="position: absolute;top: 40%;left: 15%">准备</h2>
                <h3 class="js-animate animated animation-500"
                    data-animate="bounceInLeft"
                    data-time="1500"
                    data-sec="bounceOutDown"
                    data-sectime="500"
                    style="position: absolute;top: 40%;right: 15%">好了吗</h3>

                <div class="js-animate animated animation-500"
                     data-animate="bounceInDown"
                     data-time="2500"
                     data-sec="rotateOutDownLeft"
                     data-sectime="500"

                     style="position: absolute;top: 40%;width: 100%;text-align: center;">
                    <h4>这</h4>
                    <h4 style="margin-top: 10%;">是一个</h4>
                </div>
                <h4 class="js-animate animated animation-500"
                    data-animate="swing"
                    data-time="3000"
                    data-sec="zoomOutDown"
                    data-sectime="500"
                    style="position: absolute;top: 20%;width: 100%;text-align: center;">
                    甜蜜的
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="swing"
                    data-time="3500"
                    data-sec="fadeOutUpBig"
                    data-sectime="500"
                    style="position: absolute;top: 30%;width: 100%;text-align: center;">
                    婚礼
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="swing"
                    data-time="3500"
                    data-sec="fadeOutDownBig"
                    data-sectime="500"
                    style="position: absolute;top: 40%;width: 100%;text-align: center;">
                    邀请函
                </h4>
                <h1 class="js-animate animated animation-500"
                    data-animate="fadeInUp"
                    data-time="4000"
                    data-sec="fadeOutUp"
                    data-sectime="500"
                    style="position: absolute;top: 35%;width: 100%;text-align: center;">
                    恭请各位
                </h1>

                <!--<h4 class="js-animate animated animation-500"
                   data-animate="fadeInUp"
                   data-time="4500"
                   data-sec="fadeOutUp"
                   data-sectime="5000"
                   style="position: absolute;top: 10%;width: 100%;text-align: center;">
                   各位
               </h4>-->
                <h2 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="4500"
                    data-sec="zoomOut"
                    data-sectime="3600"
                    style="position: absolute;top: 25%;left: 18%;text-align: center;">
                    家人
                </h2>
                <h4 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="4700"
                    data-sec="zoomOut"
                    data-sectime="3400"
                    style="position: absolute;top: 35%;right: 20%;text-align: center;">
                    兄弟
                </h4>
                <h3 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="4900"
                    data-sec="zoomOut"
                    data-sectime="3200"
                    style="position: absolute;top: 48%;left: 22%;text-align: center;">
                    闺蜜
                </h3>
                <h4 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="5100"
                    data-sec="zoomOut"
                    data-sectime="3000"
                    style="position: absolute;top: 50%;right: 48%;text-align: center;">
                    姨娘
                </h4>
                <h2 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="5300"
                    data-sec="zoomOut"
                    data-sectime="2800"
                    style="position: absolute;top: 30%;left: 50%;text-align: center;">
                    好友
                </h2>
                <h4 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="5500"
                    data-sec="zoomOut"
                    data-sectime="2600"
                    style="position: absolute;top: 63%;right: 33%;text-align: center;">
                    外公
                </h4>
                <h3 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="5700"
                    data-sec="zoomOut"
                    data-sectime="2400"
                    style="position: absolute;top: 36%;left: 25%;text-align: center;">
                    外婆
                </h3>
                <h2 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="5900"
                    data-sec="zoomOut"
                    data-sectime="2200"
                    style="position: absolute;top: 53%;right: 25%;text-align: center;">
                    爷爷
                </h2>
                <h4 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="6100"
                    data-sec="zoomOut"
                    data-sectime="2000"
                    style="position: absolute;top: 55%;left: 30%;text-align: center;">
                    妹妹
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="6300"
                    data-sec="zoomOut"
                    data-sectime="1800"
                    style="position: absolute;top: 20%;right: 30%;text-align: center;">
                    舅妈
                </h4>
                <h3 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="6500"
                    data-sec="zoomOut"
                    data-sectime="1600"
                    style="position: absolute;top: 60%;left: 35%;text-align: center;">
                    姨爹
                </h3>
                <h2 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="6700"
                    data-sec="zoomOut"
                    data-sectime="1400"
                    style="position: absolute;top: 40%;right: 40%;text-align: center;">
                    亲朋
                </h2>
                <h4 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="6900"
                    data-sec="zoomOut"
                    data-sectime="1200"
                    style="position: absolute;top: 23%;left: 40%;text-align: center;">
                    哥哥
                </h4>
                <h3 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="7100"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 45%;right: 28%;text-align: center;">
                    姐姐
                </h3>
                <h2 class="js-animate animated animation-500"
                    data-animate="myzoomIn"
                    data-time="7300"
                    data-sec="zoomOut"
                    data-sectime="800"
                    style="position: absolute;top: 58%;right: 20%;text-align: center;">
                    舅舅
                </h2>
                <h1 class="js-animate animated animation-600"
                    data-animate="bounceInDown"
                    data-time="8000"
                    data-sec="zoomOut"
                    data-sectime="1500"
                    style="position: absolute;top: 30%;width: 100%;text-align: center;">
                    诚<br>挚
                </h1>
                <h1 class="js-animate animated animation-600"
                    data-animate="bounceInUp"
                    data-time="8500"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 45%;width: 100%;text-align: center;">
                    邀<br>请
                </h1>
                <h1 class="js-animate animated animation-600"
                    data-animate="zoomInLeft"
                    data-time="9500"
                    data-sec="slideOutUp"
                    data-sectime="1100"
                    style="position: absolute;top: 30%;width: 100%;text-align: center;">
                    您
                </h1>
                <h2 class="js-animate animated animation-600"
                    data-animate="zoomInLeft"
                    data-time="10000"
                    data-sec="slideOutDown"
                    data-sectime="600"
                    style="position: absolute;top: 45%;width: 100%;text-align: center;">
                    携家人
                </h2>
                <h1 class="js-animate animated animation-500"
                    data-animate="bounceInUp"
                    data-time="11000"
                    data-sec="zoomOutDown"
                    data-sectime="600"
                    style="position: absolute;top: 20%;width: 100%;text-align: center;letter-spacing: 3px;line-height: 40px;">
                    参加<br>婚礼
                </h1>
                <h2 class="js-animate animated"
                    data-animate="bounceInDown"
                    data-time="12500"
                    style="position: absolute;top: 28%;width: 100%;text-align: center;font-size: 32px;font-weight: 500;">
                    我<br>们<br>结<br>婚<br>啦<br>!
                </h2>
            </div>
        </div>
        <div class="page page2">
            <div class="photo-wrap">
                <div
                        class="full-bg js-animate animated animation-1000"
                        style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/3.jpg);width: 100%;height: 100%;"
                        data-animate="myzoomIn">
                </div>
            </div>
            <div class="ele-wrap">
                <div class="js-animate animated"
                     data-animate="bounceInDown"
                     data-time="0"
                     style="position: absolute;top: 60%;width: 80%;left: 15%;text-align: center;">
                    <img style="max-width: 100%;" src="../static/meta/wedding.png">
                </div>
                <div style="position: absolute;top: 69%;left: 0;width: 100%;text-align: center;height: 20%;">
                    <img class="js-animate animated animation-1000"
                         data-animate="minzoomCycle"
                         data-time="500" src="../static/meta/hun.png"
                         style="position: absolute;left: 15%;">
                    <img class="js-animate animated animation-1000"
                         data-animate="minzoomCycle"
                         data-time="600" src="../static/meta/li.png"
                         style="position: absolute;left: 30%;">
                    <img class="js-animate animated animation-1000"
                         data-animate="minzoomCycle"
                         data-time="700" src="../static/meta/yao.png"
                         style="position: absolute;left: 44%; top: 5%;">
                    <img class="js-animate animated animation-1000"
                         data-animate="minzoomCycle"
                         data-time="800" src="../static/meta/qing.png"
                         style="position: absolute;left: 56%;top: 5%;">
                    <img class="js-animate animated animation-1000"
                         data-animate="minzoomCycle"
                         data-time="900" src="../static/meta/han.png"
                         style="position: absolute;left: 69%;top: 5%;">
                </div>
                <div class="js-animate animated animation-500 radius-box"
                     data-animate="rotateIn"
                     data-time="1500"
                     style="position: absolute;top: 80%;text-align: center;">
                </div>
                <div class="js-animate animated animation-500 radius-box"
                     data-animate="rotateIn"
                     data-time="2000"
                     style="position: absolute;top: 80%;text-align: center;">
                    <div
                            class="js-animate animated animation-500"
                            data-animate="fadeInRight" data-time="2500"
                            style="position: absolute;left: 10%;">
                        新郎: 伍艺平
                    </div>
                    <div
                            class="js-animate animated animation-500"
                            data-animate="fadeInLeft" data-time="2500"
                            style="position: absolute;right: 10%;">
                        新娘: 余雪丽
                    </div>
                    <!--<div
                            class="js-animate animated animation-800 circle-box"
                            data-animate="myzoomIn" data-time="3000"
                            data-sec="shake" data-sectime="800">
                       &lt;!&ndash; <img src="../static/meta/zuanshi.png">&ndash;&gt;
                    </div>-->
                </div>
                <div
                        class="js-animate animated"
                        data-animate="bounceInUp" data-time="3800"
                        style="position: absolute;top: 88%;left: 0;width: 100%;text-align: center;color: #3a3f58;font-size: 14px;">
                    欢迎10月04日参见我们的婚礼
                </div>
                <div
                        class="js-animate animated animation-2000"
                        data-animate="zoomIn" data-time="5000"
                        style="position: absolute;top: 95%;left: 0;width: 100%;text-align: center;">
                    <img src="../static/meta/invitation.png" style="max-width: 75%;">
                </div>
            </div>
        </div>
        <div class="page page3">
            <div class="photo-wrap">
                <div
                        class="full-bg js-animate animated animation-5000"
                        style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/6.jpg);width: 100%;height: 100%;"
                        data-sec="zoomCycle" data-time="0">
                </div>
                <div
                        class="full-bg js-animate animated animation-800"
                        style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/4.jpg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
                        data-animate="zoomIn" data-time="10500">
                </div>
                <div class="text-frame js-animate animated"
                     data-animate="bounceInUp" data-time="1000"
                     data-sec="fadeOutUp"
                     data-sectime="9000">

                </div>
                <div class="text-frame js-animate animated"
                     data-animate="bounceInDown" data-time="1000"
                     data-sec="fadeOutDown"
                     data-sectime="9000">
                </div>
            </div>
            <div class="ele-wrap">
                <h1 class="js-animate animated animation-800"
                    data-animate="myzoomIn"
                    data-time="1500"
                    data-sec="zoomOut"
                    data-sectime="800"
                    style="position: absolute;top: 40%;width: 100%;text-align: center;">她是</h1>
                <h4 class="js-animate animated animation-500"
                    data-animate="bounceInRight"
                    data-time="2500"
                    data-sec="flipOutY"
                    data-sectime="1000"
                    style="position: absolute;top: 40%;width: 100%;text-align: center;">人见</h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="bounceInLeft"
                    data-time="3000"
                    data-sec="flipOutY"
                    data-sectime="500"
                    style="position: absolute;top: 50%;width: 100%;text-align: center;">人爱</h4>

                <div class="js-animate animated animation-500"
                     data-animate="bounceInDown"
                     data-time="4000"
                     data-sec="zoomOutDown"
                     data-sectime="500"
                     style="position: absolute;top: 45%;width: 100%;text-align: center;">
                    <h4>花见</h4>
                    <h4>花开</h4>
                </div>
                <h2 class="js-animate animated animation-500"
                    data-animate="fadeInUp"
                    data-time="5000"
                    data-sec="zoomOut"
                    data-sectime="3000"
                    style="position: absolute;top: 35%;width: 100%;text-align: center;">
                    集
                </h2>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="5500"
                    data-sec="zoomOut"
                    data-sectime="2600"
                    style="position: absolute;top: 25%;left: 18%;text-align: center;">
                    温柔
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="5700"
                    data-sec="zoomOut"
                    data-sectime="2400"
                    style="position: absolute;top: 35%;right: 20%;text-align: center;">
                    善良
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="5900"
                    data-sec="zoomOut"
                    data-sectime="2200"
                    style="position: absolute;top: 48%;left: 22%;text-align: center;">
                    聪明
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6100"
                    data-sec="zoomOut"
                    data-sectime="2000"
                    style="position: absolute;top: 50%;right: 48%;text-align: center;">
                    美丽
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6300"
                    data-sec="zoomOut"
                    data-sectime="1800"
                    style="position: absolute;top: 30%;left: 50%;text-align: center;">
                    可爱
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6500"
                    data-sec="zoomOut"
                    data-sectime="1600"
                    style="position: absolute;top: 63%;right: 33%;text-align: center;">
                    性感
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6700"
                    data-sec="zoomOut"
                    data-sectime="1400"
                    style="position: absolute;top: 36%;left: 25%;text-align: center;">
                    贤惠
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6900"
                    data-sec="zoomOut"
                    data-sectime="1200"
                    style="position: absolute;top: 53%;right: 25%;text-align: center;">
                    萝莉
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="7100"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 55%;left: 30%;text-align: center;">
                    御姐
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="7300"
                    data-sec="zoomOut"
                    data-sectime="800"
                    style="position: absolute;top: 20%;right: 30%;text-align: center;">
                    女王
                </h4>
                <h4 class="js-animate animated animation-800"
                    data-animate="bounceInUp"
                    data-time="9000"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 30%;width: 100%;text-align: center;">
                    于一身
                </h4>
                <h4 class="js-animate animated animation-800"
                    data-animate="bounceInLeft"
                    data-time="9000"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 40%;width: 100%;text-align: center;">
                    的
                </h4>
                <h4 class="js-animate animated animation-800"
                    data-animate="zoomInDown"
                    data-time="9000"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 50%;width: 100%;text-align: center;">
                    新娘
                </h4>
                <div class="js-animate animated animation-800"
                     data-animate="fadeInDown"
                     data-time="10500"
                     data-sec="flashing"
                     data-time="900"
                     style="position: absolute;top: 70%;width: 40%;right: 10%;height: 20%;text-align: center;background-color: rgba(255,255,255, .7);border-radius: 10px;">

                </div>
                <div class="js-animate animated animation-800"
                     data-animate="fadeInDown"
                     data-time="10500"
                     style="position: absolute;top: 70%;width: 40%;right: 10%;height: 20%;text-align: center;">
                    <p style="margin-top: 43%;color: #3a3f58;">新 娘</p>
                    <img src="../static/meta/bride.png" style="position: absolute;bottom: -6px;width: 120%;left: -10%;">
                </div>
                <h3 class="js-animate animated animation-800"
                    data-animate="fadeInRight"
                    data-time="10500"
                    style="position: absolute;top: 71%;width: 40%;right: 10%;text-align: center;">
                    余雪丽
                </h3>
            </div>
        </div>
        <div class="page page4">
            <div class="photo-wrap">
                <div
                        class="full-bg js-animate animated animation-5000"
                        style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/7.jpg);width: 100%;height: 100%;"
                        data-sec="zoomCycle" data-time="0">
                </div>
                <div
                        class="full-bg js-animate animated animation-800"
                        style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/8.jpg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
                        data-animate="zoomIn" data-time="10500">
                </div>
                <div class="text-frame js-animate animated"
                     data-animate="bounceInUp" data-time="1000"
                     data-sec="fadeOutUp"
                     data-sectime="9000">

                </div>
                <div class="text-frame js-animate animated"
                     data-animate="bounceInDown" data-time="1000"
                     data-sec="fadeOutDown"
                     data-sectime="9000">
                </div>
            </div>
            <!-- <div class="photo-wrap">
                 <div
                         class="full-bg js-animate animated animation-5000"
                         style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/7.jpg);width: 100%;height: 100%;"
                         data-sec="zoomCycle" data-time="0">
                 </div>
                 <div
                         class="full-bg js-animate animated animation-600"
                         style="background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/8.jpg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
                         data-animate="zoomIn" data-time="10500">
                 </div>
                 <div class="text-frame js-animate animated"
                      data-animate="lightSpeedIn" data-time="1000"
                      data-sec="lightSpeedOut"
                      data-sectime="7500">
                 </div>
                 <div class="text-frame js-animate animated"
                      data-animate="lightSpeedIn" data-time="2000"
                      data-sec="lightSpeedOut"
                      data-sectime="8000">
                 </div>
             </div>-->
            <div class="ele-wrap">
                <h1 class="js-animate animated animation-800"
                    data-animate="myzoomIn"
                    data-time="1500"
                    data-sec="zoomOut"
                    data-sectime="800"
                    style="position: absolute;top: 40%;width: 100%;text-align: center;">他不仅</h1>
                <h4 class="js-animate animated animation-500"
                    data-animate="bounceInRight"
                    data-time="2500"
                    data-sec="flipOutY"
                    data-sectime="1000"
                    style="position: absolute;top: 40%;width: 100%;text-align: center;">风趣</h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="bounceInLeft"
                    data-time="3000"
                    data-sec="flipOutY"
                    data-sectime="500"
                    style="position: absolute;top: 50%;width: 100%;text-align: center;">幽默</h4>

                <div class="js-animate animated animation-500"
                     data-animate="bounceInDown"
                     data-time="4000"
                     data-sec="zoomOutDown"
                     data-sectime="500"
                     style="position: absolute;top: 45%;width: 100%;text-align: center;">
                    <h4>器宇</h4>
                    <h4>轩昂</h4>
                </div>
                <h2 class="js-animate animated animation-500"
                    data-animate="fadeInUp"
                    data-time="5000"
                    data-sec="zoomOut"
                    data-sectime="3000"
                    style="position: absolute;top: 35%;width: 100%;text-align: center;">
                    而且
                </h2>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="5500"
                    data-sec="zoomOut"
                    data-sectime="2600"
                    style="position: absolute;top: 25%;left: 18%;text-align: center;">
                    英俊
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="5700"
                    data-sec="zoomOut"
                    data-sectime="2400"
                    style="position: absolute;top: 35%;right: 20%;text-align: center;">
                    潇洒
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="5900"
                    data-sec="zoomOut"
                    data-sectime="2200"
                    style="position: absolute;top: 48%;left: 22%;text-align: center;">
                    聪明
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6100"
                    data-sec="zoomOut"
                    data-sectime="2000"
                    style="position: absolute;top: 50%;right: 48%;text-align: center;">
                    善良
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6300"
                    data-sec="zoomOut"
                    data-sectime="1800"
                    style="position: absolute;top: 30%;left: 50%;text-align: center;">
                    诚恳
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6500"
                    data-sec="zoomOut"
                    data-sectime="1600"
                    style="position: absolute;top: 63%;right: 33%;text-align: center;">
                    开朗
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6700"
                    data-sec="zoomOut"
                    data-sectime="1400"
                    style="position: absolute;top: 36%;left: 25%;text-align: center;">
                    才华
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="6900"
                    data-sec="zoomOut"
                    data-sectime="1200"
                    style="position: absolute;top: 53%;right: 25%;text-align: center;">
                    细心
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="7100"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 55%;left: 30%;text-align: center;">
                    勤劳
                </h4>
                <h4 class="js-animate animated animation-500"
                    data-animate="fadeInRight"
                    data-time="7300"
                    data-sec="zoomOut"
                    data-sectime="800"
                    style="position: absolute;top: 20%;right: 30%;text-align: center;">
                    总裁范
                </h4>
                <h4 class="js-animate animated animation-800"
                    data-animate="bounceInUp"
                    data-time="9000"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 30%;width: 100%;text-align: center;">
                    能做饭
                </h4>
                <h4 class="js-animate animated animation-800"
                    data-animate="bounceInLeft"
                    data-time="9000"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 40%;width: 100%;text-align: center;">
                    会挣钱
                </h4>
                <h4 class="js-animate animated animation-800"
                    data-animate="zoomInDown"
                    data-time="9000"
                    data-sec="zoomOut"
                    data-sectime="1000"
                    style="position: absolute;top: 50%;width: 100%;text-align: center;">
                    新郎
                </h4>
                <div class="js-animate animated animation-800"
                     data-animate="fadeInDown"
                     data-time="10500"
                     data-sec="pulseing"
                     data-time="900"
                     style="position: absolute;top: 70%;width: 40%;left: 10%;height: 20%;text-align: center;background-color: rgba(255,255,255, .7);border-radius: 10px;">

                </div>
                <div class="js-animate animated animation-800"
                     data-animate="fadeInDown"
                     data-time="10500"
                     style="position: absolute;top: 70%;width: 40%;left: 10%;height: 20%;text-align: center;">
                    <p style="margin-top: 43%;color: #3a3f58;">新 郎</p>
                    <img src="../static/meta/lang.png" style="position: absolute;bottom: -6px;width: 120%;left: -10%;">
                </div>
                <h3 class="js-animate animated animation-800"
                    data-animate="fadeInRight"
                    data-time="10500"
                    style="position: absolute;top: 71%;width: 40%;left: 10%;text-align: center;">
                    伍艺平
                </h3>
            </div>
        </div>
        <div class="page page5">
            <div class="photo-wrap">
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="fadeIn"
                     data-time="500"
                     style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/9.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="fadeInDown"
                     data-time="3000"
                     style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/10.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="fadeInUp"
                     data-time="6000"
                     style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 3;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/11.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="fadeIn"
                     data-time="9000"
                     style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 4;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/12.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="rollIn"
                     data-time="12000"
                     style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/18.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="rotateInDownRight"
                     data-time="15000"
                     style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 6;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/14.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="rotateIn"
                     data-time="18000"
                     style="position: absolute;width: 100%;height: 38%;top: 0;left: 0;z-index: 7;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/15.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="rotateInDownRight"
                     data-time="18000"
                     style="position: absolute;width: 100%;height: 62%;top: 38%;left: 0;z-index: 8;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/16.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="rotateInDownRight"
                     data-time="21000"
                     style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/17.jpg);"></div>
                <div class="photo-box js-animate animated animation-2000"
                     data-animate="zoomIn"
                     data-time="24000"
                     style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;
                        background-image: url(https://zhekouchecangw7.oss-cn-hangzhou.aliyuncs.com/erp/test/qt/photo/13.jpg);"></div>
                <h4 class="js-animate animated animation-2000"
                    data-animate="myzoomIn"
                    data-time="24000"
                    style="position: absolute;width: 100%;bottom: 6%;left: 0;z-index: 11;text-align: center;line-height: 28px;">
                    10月4日<br>
                    广安区花桥镇黄记食府
                </h4>
                <div class="text-frame js-animate animated"
                     data-animate="zoomInLeft" data-time="1000"
                     data-sec="pulseing"
                     data-sectime="1000">
                </div>
                <div class="text-frame js-animate animated"
                     data-animate="zoomInRight" data-time="1000"
                     data-sec="pulseing"
                     data-sectime="1500">
                </div>
            </div>
            <div class="ele-wrap">
            </div>
        </div>
        <div class="page page6" style="position: relative;">
            <div id="map"></div>
            <div id="location-btn"><i class="iconfont" style="font-size: 32px;">&#xe616;</i></div>
            <div id="map-msg">
                <!--大巴车 &#xe622; -->
                <p class="js-animate animated" data-animate="bounceInDown" data-time="0"><i
                        class="iconfont red-icon">&#xe617;</i>幸福时刻：2024.10.04
                </p>
                <!--这里配置地图的经纬度-->
                <p class="js-animate animated" data-animate="bounceInLeft" data-time="1000"><i
                        class="iconfont red-icon">&#xe63e;</i>婚礼现场：<a
                        href="https://uri.amap.com/marker?position=106.694152,30.78266&name=广安花桥黄记食府-伍艺平余雪丽诚挚邀请">
                    广安区花桥镇黄记食府
                </a></p>
                <!--<p class="js-animate animated" data-animate="bounceInRight" data-time="2000"><i
                        class="iconfont red-icon">&#xe72b;</i></p>-->
                <!--配置电话号码-->
                <p class="js-animate animated" data-animate="bounceInUp" data-time="1000"><i class="iconfont red-icon">&#xe636;</i>有疑问请点击致电
                    <a href="tel:15520131483">新郎</a> & <a href="tel:15520131485">新娘</a></p>
            </div>
        </div>
    </div>
    <span class="start"><i class="iconfont" style="color: #fff;font-size: 30px;">&#xe606;</i></span>
    <!-- <audio id="mp3" src="music/music.mp3" autoplay loop></audio>-->
    <script src="../static/js/js.fullpage.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=S6EO9oPso0n8aTMvfH1g0aLUX6vGZx1l"></script>
    <script>
        // 滚屏动画控制
        if (isMobile !== false) {
            var loadTimer = setInterval(() => {
                if (loadSum >= 17) {
                    start()
                }
            }, 300);
        }
        var domLists = []
        var mapFlag = false

        function start() {
            clearInterval(loadTimer);

            var forEach = [].forEach;

            setTimeout(() => {
                document.getElementById('loading-mask').style.display = 'none'
            }, 100);
            document.getElementsByClassName('wp-inner')[0].fullpage({
                change: function (e) {
                    clearTime()
                    // 移除动画属性
                    forEach.call(document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate'), function (v) {
                        v.classList.add('hide');
                        v.classList.remove(v.dataset['animate']);
                        if (v.dataset['sec']) {
                            v.classList.remove(v.dataset['sec']);
                        }
                    });
                },
                afterChange: function (e) {
                    if (e.cur === 5 && !mapFlag) {
                        initMap()
                    }

                    domLists = document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate')
                    forEach.call(domLists, v => {
                        var time = v.dataset.time;
                        v.timer = setTimeout(function () {
                            v.classList.add(v.dataset['animate']);
                            v.classList.remove('hide');
                            if (v.dataset['sec']) {
                                var time = v.dataset.sectime || 0
                                v.sectimer = setTimeout(function () {
                                    v.classList.remove(v.dataset['animate']);
                                    v.classList.add(v.dataset['sec']);
                                }, time);
                            }
                        }, time);
                    })
                }
            });
        }

        function clearTime() {
            domLists.forEach((dom, i, arr) => {
                if (dom.timer) {
                    clearTimeout(dom.timer);
                }
                if (dom.sectimer) {
                    clearTimeout(dom.sectimer);
                }
                if (arr && arr.splice) {
                    arr.splice(i, 1)
                }
            })
        }

        // 地图
        function initMap() {
            if (window.BMap) {
                mapFlag = true
                var mapCenter = [106.694152, 30.78266]
                var map = new BMap.Map("map", {minZoom: 10, maxZoom: 14})

                map.centerAndZoom(new BMap.Point(mapCenter[0], mapCenter[1]), 13);

                function ComplexCustomOverlay(point, text, mouseoverText) {
                    this._point = point;
                    this._text = text;
                    this._overText = mouseoverText;
                }

                ComplexCustomOverlay.prototype = new BMap.Overlay();
                ComplexCustomOverlay.prototype.initialize = function (map) {
                    this._map = map;
                    var div = this._div = document.createElement("div");
                    div.style.position = "absolute";
                    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
                    div.style.backgroundColor = "#E60000";
                    div.style.borderRadius = "3px";
                    div.style.color = "white";
                    div.style.height = "18px";
                    div.style.padding = "2px 4px";
                    div.style.lineHeight = "18px";
                    div.style.whiteSpace = "nowrap";
                    div.style.MozUserSelect = "none";
                    div.style.fontSize = "12px"
                    var span = this._span = document.createElement("span");
                    div.appendChild(span);
                    span.appendChild(document.createTextNode(this._text));
                    var that = this;

                    var arrow = this._arrow = document.createElement("div");
                    // arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
                    arrow.style.position = "absolute";
                    arrow.style.width = "0";
                    arrow.style.height = "0";
                    arrow.style.top = "22px";
                    arrow.style.left = "10px";
                    arrow.style.overflow = "hidden";
                    arrow.style.border = "6px solid transparent";
                    arrow.style.borderTop = "6px solid #E60000";
                    div.appendChild(arrow);
                    map.getPanes().labelPane.appendChild(div);
                    return div;
                }
                ComplexCustomOverlay.prototype.draw = function () {
                    var map = this._map;
                    var pixel = map.pointToOverlayPixel(this._point);
                    this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
                    this._div.style.top = pixel.y - 30 + "px";
                }

                var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(mapCenter[0], mapCenter[1]), "婚礼现场", "N and Y");
                map.addOverlay(myCompOverlay);
                document.querySelector('#location-btn').addEventListener('click', () => {
                    map.panTo(new BMap.Point(mapCenter[0], mapCenter[1]))
                })
            }
        }

        // 音乐播放控制
        /* window.onload = function () {
             let mp3 = document.querySelector('#mp3')
             let playBtn = document.querySelector('#play-btn')
             let play

             mp3.load()
             document.addEventListener("WeixinJSBridgeReady", function () {
                 mp3.play()
                 if (!mp3.paused) {
                     this.style.animationPlayState = 'running'
                     mp3.play()
                     play = true
                 }
             }, false)

             play = !mp3.paused && mp3.readyState === 4

             if (play) {
                 playBtn.style.animationPlayState = 'running'
             } else {
                 playBtn.style.animationPlayState = 'paused'
             }

             playBtn.addEventListener('click', function (event) {
                 if (play) {
                     this.style.animationPlayState = 'paused'
                     mp3.pause()
                     play = false
                 } else {
                     if (mp3.readyState === 4) {
                         this.style.animationPlayState = 'running'
                         mp3.play()
                         play = true
                     }
                 }
             })
         }*/
    </script>
</div>
</body>
</html>
